<template>
  <div class="input-file">
    <el-input
      class="show-file"
      readonly
      @click="onUpload"
      :model-value="modelValue && modelValue.name"
    ></el-input>

    <input type="file" ref="fileRef" v-show="false" @change="onChange" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'InputFile',
  props: {
    modelValue: Object
  },
  emits: ['update:modelValue'],
  setup (_, { emit }) {
    const fileRef = ref(null)

    const onUpload = () => {
      fileRef.value.click()
    }

    const onChange = () => {
      const [file] = fileRef.value.files
      fileRef.value.value = ''
      emitChange(file || null)
    }

    const emitChange = (file) => {
      emit('update:modelValue', file)
    }

    return {
      fileRef,
      onUpload,
      onChange
    }
  }
}
</script>

<style lang="scss">
.input-file {
  .show-file {
  }
}
</style>
